<script setup>
import { debounce } from "lodash";
import { nextTick, onActivated, ref } from "vue";
import {
  getRecommendList,
  getNewestAlbum,
  getArtistList,
} from "../../apis/user";
import emitter from "../../utils/eventBus";
import daily from '@/views/home/daily.vue'
import { createWindow } from "../../utils/ipcRenderer";
import { storeToRefs } from "pinia";
import { userStore } from "@/store/user";
const { loginStatus, userInfo, userId } = storeToRefs(userStore());

const loading = ref(true);

const playlists = ref([]);
const albumList = ref([]);
const singerList = ref([]);

const scrollbar = ref();
const height = ref();
//保存滚动条高度
const handleScroll = debounce((data) => {
  height.value = data.scrollTop;
}, 200);

onActivated(() => {
  scrollbar.value.wrap$.scrollTop = height.value;
  // scrollbar.value.wrap$.scrollTo({ behavior: "smooth", top: 1600 });
});

const getList = async () => {
  //获取歌单
  await getRecommendList({ limit: 10 }).then((res) => {
    playlists.value = res.playlists;
  });
  //获取专辑
  await getNewestAlbum({ limit: 10 }).then((res) => {
    albumList.value = res.albums;
  });
  //获取歌手
  await getArtistList({ limit: 10 }).then((res) => {
    singerList.value = res.artists;
  });

  loading.value = false;
};

getList();

const handleClick = (id) => {
  createWindow({
    windowName: "songListDetail",
    path: "songListDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

const handleAlbum = (id) => {
  createWindow({
    windowName: "albumDetail",
    path: "albumDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

const handleSinger = (id) => {
  createWindow({
    windowName: "singerDetail",
    path: "singerDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};
</script>

<template>
  <div class="home_container">
    <el-scrollbar ref="scrollbar" @scroll="handleScroll" style="height: 100%">
      <div class="song_list">
        <div class="title">推荐歌单</div>
        <div class="item_wrap">
          <div
            class="custom-loading-svg item"
            @click="handleClick(item.id)"
            v-for="item in playlists"
            :key="item.id"
          >
            <div>
              <el-image lazy :src="item.coverImgUrl+`${'?param=500y500'}}`">
                <template #placeholder>
                  <div class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div v-if="userId" class="song_list">
        <div class="title">For You</div>
        <daily></daily>
      </div>
      <div class="song_list">
        <div class="title">新专速递</div>
        <div class="item_wrap">
          <div
            @click="handleAlbum(item.id)"
            class="item"
            v-for="item in albumList"
            :key="item.id"
          >
            <div>
              <!-- <img :src="item.blurPicUrl" alt="" /> -->
              <el-image lazy :src="item.blurPicUrl+`${'?param=500y500'}}`">
                <template #placeholder>
                  <div class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="song_list">
        <div class="title">推荐艺人</div>
        <div class="item_wrap">
          <div
            @click="handleSinger(item.id)"
            class="item item-singer"
            v-for="item in singerList"
            :key="item.id"
          >
            <div>
              <!-- <img :src="item.img1v1Url" alt="" /> -->
              <el-image lazy :src="item.img1v1Url+`${'?param=300y300'}}`">
                <template #placeholder>
                  <div class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.home_container {
  height: 100%;
  cursor: pointer;
}
</style>
